<template>
  <div class="coms-page">
    <h1>FGDesigner 表单编辑器</h1>
    <div class="text1">可以通过拖拽的方式将单个组件组成一个完整的表单，生成JSON字符串</div>
    <el-card header="演示">
      <template #header>
        <div slot="header" style="display:flex;justify-content:space-between">
          <span>演示</span>
          <div>
            <el-form :inline="true">
              <!-- <el-form-item label="enabled">
                <el-switch v-model="enabled" />
              </el-form-item>
              <el-form-item label="hideSaveBtn">
                <el-switch v-model="hideSaveBtn" />
              </el-form-item>-->
              <!-- <el-form-item> -->
              <el-button size="mini" round @click="handleValid">校验</el-button>
              <el-button size="mini" round @click="dialogVisible=true">
                <el-tooltip content="点击此处查看表单编辑器生成的JSON表单数据" placement="top">
                  <i class="el-icon-view" style="margin-right:5px"></i>
                </el-tooltip>表单数据
              </el-button>
              <!-- </el-form-item> -->
              <!-- <el-form-item> -->
              <el-button size="mini" icon="el-icon-user" circle @click="dialogLogin = true" />
              <!-- </el-form-item> -->
              <!-- <el-form-item>
                <el-button
                  size="mini"
                  icon="el-icon-full-screen"
                  circle
                  @click="maxScreen=!maxScreen"
                />
              </el-form-item>-->
            </el-form>
          </div>
        </div>
      </template>
      <FGDesigner
        v-if="!loading"
        ref="FGDesigner"
        class="comsDesiger"
        :class="maxScreen?'max-screen':''"
        :enabled="enabled"
        :hideSaveBtn="hideSaveBtn"
        :options="options"
        v-model="value"
        @save="handleSave"
      />
      <div class="introduce">
        表单编辑器分为组件库、表单画板、属性面板三个区域：
        <h4>1. 组件库</h4>
        <div
          class="introduce-item"
        >组件库面板提供两种方式添加组件：点击（组件置于最下方）和拖拽（可手动拖拽到任意位置），将一个组件添加到画板中后，它会被自动选中，配置面板会显示该组件的所有属性，并且可以任意更改这些属性，例如组件类型、字段名称、标题、校验规则等。</div>
        <h4>2. 表单画板</h4>
        <div
          class="introduce-item"
        >表单画板是表单编辑器的主要工作区域，提供了一种直观的方式来构建和设计表单，在表单画板中，可以使用拖放和单击等交互式操作，完成复制、删除和移动表单组件</div>
        <h4>3. 属性面板（组件属性+表单属性）</h4>
        <div class="introduce-item">表单属性：用于配置表单属性的区域。</div>
        <div class="introduce-item">组件属性：用于配置组件属性的区域。当添加或选择表单中的一个组件时，该组件的属性将在属性面板中显示，可以任意修改该组件的属性配置。</div>
        <el-link href="#/config" type="primary" :underline="false">组件配置属性说明</el-link>
      </div>
    </el-card>

    <el-card header="代码">
      <Code :code="desigerCode" />
    </el-card>
    <el-card header="Attributes">
      <Attributes :data="desigerAttributes" />
    </el-card>
    <!-- <el-card header="Methods">
      <Methods :data="desigerMethods" />
    </el-card>-->
    <el-card header="Events">
      <Events :data="desigerEvents" />
    </el-card>
    <el-dialog
      title="表单编辑器生成的JSON表单数据"
      class="form-dialog"
      width="1000px"
      v-if="dialogVisible"
      v-model="dialogVisible"
    >
      <Code :code="value" />
    </el-dialog>
    <el-dialog title="登录" v-model="dialogLogin" width="30%">
      <el-form :model="login" label-width="100px">
        <el-form-item label="账号" prop="cellphone">
          <el-input type="cellphone" v-model="login.cellphone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="login.password"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogLogin = false">取 消</el-button>
          <el-button type="primary" @click="handleLogin">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  desigerAttributes,
  desigerMethods,
  desigerCode,
  desigerEvents,
} from "@/utils/comsData";
import Attributes from "./components/Attributes";
import Methods from "./components/Methods";
import FGDesigner from "@/package/FGDesigner";
import Events from "./components/Events";
import Code from "@/components/code/Code";
import { deepClone } from "../../components/formGenerator/utils";
import { requestPost } from "@/api/data";
import store from "@/store";
import { Message } from "element-plus";

export default {
  components: { Attributes, Methods, FGDesigner, Events, Code },
  data() {
    return {
      desigerAttributes,
      desigerMethods,
      desigerCode,
      desigerEvents,
      dialogVisible: false,
      value: JSON.parse(store.state.app.formData),
      enabled: false,
      hideSaveBtn: false,
      maxScreen: false,
      dialogLogin: false,
      login: {},
      loading: false,
    };
  },
  computed: {
    options() {
      return {
        header: {
          "access-ecs-token": store.state.user.token,
          "system-type": store.state.user.systemType,
        },
      };
    },
  },
  methods: {
    handleLogin() {
      const formData = {
        cellphone: this.login.cellphone,
        password: this.$md5(this.login.password),
        code: "sfs",
        codeNumber: 0.21611088647354593,
      };
      this.loading = true;
      requestPost(window.APLURL + "/sys/user/userLogin", formData)
        .then((res) => {
          if (res.code == 1) {
            Message.success("登录成功");
            this.dialogLogin = false;
            store.commit("SET_SYSTEMTYPE", res.result.actionCode);
          } else Message.error(res.msg);
        })
        .catch(() => {
          Message.error("登录失败");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleSave(form) {
      console.log("数据：", form);
      // this.$messageBox.
      store.commit("SET_FORMDATA", deepClone(JSON.stringify(form)));
    },
    // 校验
    handleValid() {
      this.$refs.FGDesigner.validate((valid, message) => {
        if (!valid) return this.$message.error(message);
      });
    },
  },
};
</script>

<style lang="scss" scope>
.comsDesiger {
  height: 800px;
  // border: 1px solid #f1e8e8;
  box-shadow: 0 0 4px #0000001a;
  border-radius: 5px;
  margin-bottom: 20px;
}
// .max-screen {
//   position: fixed;
//   top: 0;
//   left: 0;
//   right: 0;
//   bottom: 0;
//   height: 100vh;
//   z-index: 100;
//   background-color: #fff;
// }
</style>
